<script lang="ts" setup>
// 定义数据
const servicesData = [
  {
    title: "足不出户",
    items: [
      {
        id: 1,
        icon: "icon-icon-test",
        text: "上门维修",
        color: "#ffffff",       // 图标颜色（白色）
        bgColor: "#5E8BFF",      // 背景色（蓝色）
        url: '/pages-sub/service-module/offline-repair'
      },
      {
        id: 2,
        icon: "icon-kuaidi",
        text: "快递寄件",
        color: "#ffffff",
        bgColor: "#FF7D4F",      // 背景色（橙色）
        url: '/pages-sub/service-module/express-send'
      },
      {
        id: 3,
        icon: "icon-24gf-bagFull2",
        text: "快递代拿",
        color: "#ffffff",
        bgColor: "#31E8AC",      // 背景色（绿色）
        url: '/pages-sub/service-module/express-delivery'
      },
    ],
  },
  {
    title: "学习小帮手",
    items: [
      {
        id: 4,
        icon: "icon-jishiben",
        text: "记事本",
        color: "#ffffff",
        bgColor: "#9677FE",      // 背景色（紫色）
        url: '/pages-sub/service-module/express-delivery'
      },
      {
        id: 5,
        icon: "icon-kechengbiao",
        text: "课程表",
        color: "#ffffff",
        bgColor: "#FF6B81",      // 背景色（粉色）
        url: '/pages-sub/service-module/express-delivery'
      },
    ],
  },
  {
    title: "社交倾述所",
    items: [
      {
        id: 6,
        icon: "icon-icon-test1",
        text: "校园广场",
        color: "#ffffff",
        bgColor: "#FFD166",      // 背景色（黄色）
        url: '/pages-sub/service-module/express-delivery'
      },
    ],
  },
];

// 跳转到指定页面
const handServiceHump = (url: string) => {
  uni.navigateTo({ url })
}


</script>

<template>
  <view class="services">
    <view v-for="(category, index) in servicesData" :key="index">
      <h1 class="services-h1">{{ category.title }}</h1>
      <view style="display: flex;  margin-top: 20rpx;">
        <view class="services-content" v-for="item in category.items" :key="item.id" @click="handServiceHump(item.url)">
          <view class="services-content-icon" :style="{ backgroundColor: item.bgColor }">
            <uni-icons custom-prefix="iconfont" :color="item.color" :type="item.icon" size="35"></uni-icons>
          </view>
          <text class="services-content-text">{{ item.text }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.services {
  &-h1 {
    font-size: 35rpx;
    font-weight: 700;
    margin-top: 30rpx;
  }

  &-content {
    width: 130rpx;
    margin-right: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10rpx;

    &-icon {
      display: inline-flex;
      /* 改为 inline-flex 使宽度由内容决定 */
      justify-content: center;
      align-items: center;
      padding: 10rpx;
      border-radius: $uni-border-radius;
    }

    &-text {
      font-size: 28rpx;
      text-align: center;
      /* 使文字居中 */
    }
  }
}
</style>